<template>
  <div class="buildProject">
    <el-form  :rules="rules" ref="buildProjectForm" :model="buildProjectForm" label-width="140px" label-position="right">
      <div class="title">
        <h3>1、项目信息 </h3><span class="completeIcon" v-show="step === 2"></span>
        <el-button class="updateBtn" v-show="step === 2" @click="step = 1">编辑</el-button>
      </div>
      <div class="projectInfo" v-show="step === 1">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="projectName" label="项目名称" class="form-item-top">
              <el-input v-model="buildProjectForm.projectName" placeholder="请输入名称" class="inputWidth"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="processCode" label="项目流程" class="form-item-top">
              <el-select v-model="buildProjectForm.processCode" multiple clearable placeholder="请选择" class="inputWidth">
                <el-option v-for="(item, processIndex) in progressOptions" :label="item.label" :value="item.value"
                           :key="processIndex"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="cityCode" label="城市" class="form-item-top">
              <el-select v-model="buildProjectForm.cityCode" placeholder="请选择" class="inputWidth" @input="getCompany" clearable>
                <el-option v-for="(item, cityIndex) in cityOptions" :label="item.cityName" :value="item.cityName"
                           :key="cityIndex"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="branchName" label="城市分支" class="form-item-top">
              <el-select v-model="buildProjectForm.branchName" placeholder="请选择" class="inputWidth" clearable>
                <el-option v-for="(item, companyIndex) in companyOptions" :label="item.branchName" :value="item.branchName"
                           :key="companyIndex"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="contractNo" label="合同编号" class="form-item-top">
              <el-input v-model="buildProjectForm.contractNo" placeholder="请填写合同编号"
                        class="inputWidth"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="startupTime" label="项目启动时间" class="form-item-top">
              <el-date-picker v-model="buildProjectForm.startupTime" type="date" placeholder="选择日期"
                              @input="dateScopeChange" class="inputWidth"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="projectDutyName" label="项目负责人" class="form-item-top">
              <el-input v-model="buildProjectForm.projectDutyName" placeholder="请填写项目负责人"
                        class="inputWidth"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="factoryName" label="合作厂商" class="form-item-top">
              <el-select v-model="buildProjectForm.factoryName" placeholder="请选择合作厂商" class="inputWidth" clearable>
                <el-option v-for="(item, factoryIndex) in factoryOptions" :label="item.label" :value="item.value"
                           :key="factoryIndex"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目详情" class="form-item-top">
              <el-input type="textarea" v-model="buildProjectForm.description" placeholder="请填写项目详情"
                        class="inputWidth"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="operationBtn">
            <el-button class="cancelBtn" @click="clearForm">取消</el-button>
            <el-button class="nextBtn" @click="next" :class="{isDisabled: buildProjectForm.processCode.length === 0}" :disabled="buildProjectForm.processCode.length === 0">下一步</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="title">
        <h3>2、分配任务 </h3><span class="completeIcon" v-show="false"></span>
        <el-button class="updateBtn" v-show="false">编辑</el-button>
      </div>
      <div class="projectInfo" v-show="step === 2">
        <el-row>
          <el-col :span="12" v-for="(progress, index) in selectedProgress" :key="progress.label">
            <el-form-item :label="progress.label" class="form-item-top">
              <el-select v-model="buildProjectForm[progress.label]" filterable multiple placeholder="请选择" class="inputWidth">
                <el-option-group v-for="(company, companyIndex) in personOptions" :key="companyIndex" :label="company.companyName">
                  <el-option v-for="(person, personIndex) in company.options" :key="personIndex" :label="person.memberName"
                             :value="person.memberName">
                  </el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="operationBtn">
            <el-button class="cancelBtn" @click="clearForm">取消</el-button>
            <el-button class="nextBtn" @click="submitForm('buildProjectForm')">完成</el-button>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>
<script>
  import ajax from '../../../utils/ajax/index'
  import setDate from '../../../utils/date/setDate'
  import clearObj from '../../../utils/clearObj'

  export default {
    data () {
      return {
        buildProjectForm: {
          projectName: '',
          processCode: [],
          cityCode: '',
          branchName: '',
          description: '',
          contractNo: '',
          startupTime: '',
          progress: [],
          factoryName: '',
          projectDutyName: ''
        },
        rules: { // 表单规则
          projectName: [
            { required: true, message: '请输入项目名称', toggle: 'blur' },
            { min: 2, max: 30, message: '长度在2-30之间', toggle: 'blur' }
          ],
          processCode: [
            { required: true, type: 'array', message: '请选择项目流程', toggle: 'blur' }
          ],
          cityCode: [
            { required: true, message: '请选择城市', toggle: 'blur' }
          ],
          branchName: [
            { required: true, message: '请选择公交公司', toggle: 'blur' }
          ],
          contractNo: [
            { required: true, message: '请填写合同编号', toggle: 'blur' }
          ],
          startupTime: [
            { required: true, message: '请填写项目启动时间', toggle: 'blur' }
          ],
          projectDutyName: [
            { required: true, message: '请填写项目负责人', toggle: 'blur' }
          ],
          factoryName: [
            { required: true, message: '请选择合作厂商', toggle: 'blur' }
          ]
        },
        progressOptions: [{
          value: '机具采购',
          label: '机具采购'
        }, {
          value: '机具运输',
          label: '机具运输'
        }, {
          value: '机具验收',
          label: '机具验收'
        }, {
          value: '机具安装',
          label: '机具安装'
        }, {
          value: '机具维护',
          label: '机具维护'
        }, {
          value: '机具回收',
          label: '机具回收'
        }],
        cityOptions: [],
        companyOptions: [],
        personOptions: [{
          label: '角色名称1',
          options: [{
            value: '人名1',
            label: '人名1'
          }, {
            value: '人名2',
            label: '人名2'
          }]
        }, {
          label: '角色名称2',
          options: [{
            value: '人名3',
            label: '人名3'
          }, {
            value: '人名4',
            label: '人名4'
          }, {
            value: '人名5',
            label: '人名5'
          }, {
            value: '人名6',
            label: '人名6'
          }]
        }],
        factoryOptions: [],
        selectedProgress: [], // 选择的流程
        step: 1
      }
    },
    mounted () {
      this.getCity()
      this.getMember()
      this.getFactory()
    },
    methods: {
      dateScopeChange (val) {
        this.buildProjectForm.startupTime = setDate(val)
      },
      next () {
        this.step = 2
        // 初始化选中的流程
        this.selectedProgress = this.progressOptions.filter((item, index) => {
          return this.buildProjectForm.processCode.indexOf(item.value) !== -1
        })
      },
      getCity () { // 获取城市列表
        let that = this
        let url = that.api.buildProject.getCity
        let store = that.$store
        ajax.get(url, {}, store, true).then((res) => {
          console.log(res)
          let data = res.data
          that.cityOptions = data
        })
      },
      getCompany () { // 获取公司列表
        let that = this
        let url = that.api.buildProject.getCompany
        ajax.get(url, {cityName: that.buildProjectForm.cityCode}).then((res) => {
          let data = res.data.list
          that.companyOptions = data
        })
      },
      getMember () {  // 获取人员列表
        let that = this
        let store = that.$store
        let url = that.api.buildProject.getMember
        ajax.get(url, {}, store, true).then((res) => {
          console.log(res)
          that.personOptions = res.data
        })
      },
      getFactory () {  // 获取厂商列表
        let that = this
        let store = that.$store
        let url = that.api.buildProject.getFactory
        ajax.get(url, {pageSize: 10000}, store, true).then((res) => {
          console.log(res)
          that.factoryOptions = []
          for (let i = 0; i < res.data.list.length; i++) {
            let item = res.data.list[i]
            that.factoryOptions.push({label: item.factoryName, value: item.factoryName})
          }
        })
      },
      submitForm (formName) {
        let that = this
        let confirm = that.$confirm
        let msg = that.$message
        let url = that.api.buildProject.add
        let object = {}
        for (let key in that.buildProjectForm) {
          object[key] = that.buildProjectForm[key]
        }
        for (var key in object) {
          object[key] = that.buildProjectForm[key]
          if (object[key] instanceof Array && key !== 'progress' && key !== 'processCode') {
            let obj = {}
            obj[key] = JSON.stringify(object[key])
            object.progress.push(obj)
          }
        }
        object.progress = JSON.stringify(object.progress)
        that.$refs[formName].validate((valid) => {
          if (valid) { // 通过验证
            confirm('是否继续?', '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'})
              .then(() => {
                ajax.post(url, object, false).then((res) => {
                  if (res.msg.code === '20000') {
                    console.log(res)
                    let data = res.data
                    that.data = data
                    msg({type: 'success', message: '新建项目成功！'})
                    that.$router.push('/cityList')
                  } else {
                    msg({type: 'error', message: res.msg.message})
                  }
                })
              }).catch(() => {})
          } else {
            // 未通过验证
            msg({type: 'error', message: '必填项填写有误！'})
          }
        })
      },
      clearForm () {
        clearObj(this.buildProjectForm)
      }
    }
  }
</script>
